<template>
  <div class="v-tabs-pane" v-show="active === name">
    <slot name="default"></slot>
  </div>
</template>
<script setup>
  import { inject, reactive, getCurrentInstance, computed, onMounted } from 'vue'
  defineOptions({ name: 'v-tabs-pane' })
  const props = defineProps({
    // tab项的文本或者render函数
    label: {
      type: [String, Function],
    },
    // 每项标识
    name: {
      type: String,
    },
    // 页签类型
    banner: {
      type: String,
    },
  })

  const state = reactive({
    label: props.label,
    name: props.name,
    banner: props.banner,
  })

  const provideData = inject('provideData')
  const active = computed(() => provideData().active())

  onMounted(() => {
    provideData().setTabBar({ label: state.label, name: state.name, banner: state.banner })
  })
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .v-tabs-pane {
    width: 100%;
    height: 100%;
  }
</style>
